import React, { forwardRef, useState } from 'react'
import { Form, Input, Select } from 'antd';
const { Option } = Select
const userForm = forwardRef((props, ref) =>{
    const [disabled,setdisabled] = useState(false)
    return (
        <div>
            <Form
                ref={ref}
                layout='vertical'
            >
                <Form.Item
                    name="username"
                    label="用户名"
                    rules={[{ required: true, message: '请输入用户名!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="password"
                    label="密码"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="region"
                    label="区域"
                    rules={[{ required: true, message: '请输入区域!' }]}
                >
                    <Select>
                        {
                            props.regionList.map(item => {
                                return <Option key={item.id} value={item.value}>{item.value}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item
                    name="role"
                    label="角色"
                    rules={[{ required: true, message: '请输入角色!' }]}
                >
                    <Select onChange={(value)=>{
                        console.log(value)
                    }}>
                        {
                            props.roleList.map(item => {
                                return <Option key={item.id} value={item.value}>{item.roleName}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
            </Form>
        </div>
    )
})
export default userForm